﻿<!DOCTYPE html>
<html>
  <head>
    <title>考勤管理</title>

    <meta name="keywords" content="keyword1,keyword2,keyword3">
    <meta name="description" content="this is my page">
    <meta name="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" href="/static/plugin/layui/css/layui.css" media="all" />
    <link rel="stylesheet" href="/static/css/public.css" media="all" />
    <script type="text/javascript" src="/static/plugin/jquery/jquery-3.3.1.js"></script>
    <script type="text/javascript" src="/static/plugin/layui/layui.js"></script>
	  <script type="text/javascript" src="/static/js/base.js"></script>
	<style type="text/css">
		.xing
		{
			color: red;
			float: left;
			display: block;
			width: 0.1%;
			margin-top:-25px;
			margin-left: 83%; 
			font-size: 24px;
		}
	</style>
  </head>
  <script type="text/javascript"></script>
  <body  class="layui-anim">
    <div class="x-nav">
	    <span class="layui-breadcrumb">
	        <a href="">首页</a>
	        <a>
	            <cite>考勤管理</cite>
	        </a>
	    </span>
	</div>
	<div class="x-body">
		<div class="layui-row" style="margin-bottom: 18px">
			<form class="layui-form">
				<div class="layui-inline">
					<div class="layui-input-inline">
	            		<input type="text" id="keyword01" class="layui-input searchVal" placeholder="请输入员工名称" />
					</div>
					<div class="layui-input-inline">
						<input class="layui-input" id="startTime" placeholder="请输入开始日期" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
						-<input class="layui-input" id="endTime" placeholder="请输入结束日期" autocomplete="off" style="display: inline; width: 180px; margin-left: 10px">
					</div>
					<button type="button" class="layui-btn layui-btn-normal" data-type="reload"><i class="layui-icon layui-icon-search"></i>检索</button>
				</div>
			</form>
		</div>
		<table class="layui-hide" id="tableList" lay-filter="tableList"></table>
		<table class="layui-hide" id="tableListDetail" lay-filter="tableListDetail"></table>
	</div>


	<script type="text/javascript">
		layui.use(['table','layer','upload','form','laydate'], function(){
			var table = layui.table;
			var layer = layui.layer;
			var form = layui.form;
			var laydate = layui.laydate;

			/********************************* 开始时间结束时间设置 star *********************************/
					//日期时间范围
			var minListDate = "1000-01-01";//最小可选时间，例：1990-02-01
			var maxListDate = "3000-12-31";//最大可选时间，例：2200-12-31
			//结束时间
			var enddate = laydate.render({
				elem: "#endTime",
				format: 'yyyy-MM-dd',
				type: 'date',
				min: minListDate,
				max: maxListDate,
				done: function (val, date) {
					if (date && date.year){
						//设置结束时间 设置开始时间的最大值为结束时间
						begindate.config.max = {
							year: date.year,
							month: date.month - 1,//必须减1才是正确值
							date: date.date,
						};
					}else {
						//清除结束值    设置开始时间最大值
						var dateInit = new Date(maxListDate.replace(/-/g, "/"));
						begindate.config.max = {
							year: dateInit.getFullYear(),
							month: dateInit.getMonth(),
							date: dateInit.getDate(),
						};
					}
				}
			});
			//开始时间
			var begindate = laydate.render({
				elem: "#startTime",
				format: 'yyyy-MM-dd',
				type: 'date',
				min: minListDate,
				max: maxListDate,
				done: function (val, date) {
					if (date && date.year){
						//设置开始时间 设置结束时间的最小值为开始时间
						enddate.config.min = {
							year: date.year,
							month: date.month - 1,
							date: date.date,
						};
					}else {
						//清除开始值 ，设置结束值最小值
						var dateInit = new Date(minListDate.replace(/-/g, "/"));
						enddate.config.min = {
							year: dateInit.getFullYear(),
							month: dateInit.getMonth(),
							date: dateInit.getDate(),
						};
					}
				}
			});
			/********************************* 开始时间结束时间设置  end*********************************/

			var $ = layui.jquery, active = {
				reload:function () {
					var whereStr = ""
					var keyword01 = $("#keyword01").val();
					if(keyword01 != ""){
						whereStr += " and username = '''" + keyword01+"'''"
					}
					var startTime = $("#startTime").val();
					if(startTime != ""){
						whereStr += " and tadate >= '''" + startTime+"'''"
					}
					var endTime = $("#endTime").val();
					if(endTime != ""){
						whereStr += " and tadate <= '''" + endTime+"'''"
					}
					table.reload('contenttable',{
						method:'get',
						where:{"whereStr":whereStr}
						,page: {
							curr: 1//重新从第 1 页开始
						}
					});
				}
			}

			$('.layui-btn').on('click', function(){
				var type = $(this).data('type');
				active[type] ? active[type].call(this) : '';
			});
			table.render({
				elem: '#tableList'
				,url:'/timeAttendance/timeAttendanceList'
				,title: '考勤列表'
				,id :'contenttable'
				,limits:[10,20,30]
				,toolbar: '#toolbar'
				,request: {   //如果无需自定义请求参数，可不加该参数
					pageName: 'page' //页码的参数名称，默认：page
					,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				,response: {   //如果无需自定义数据响应名称，可不加该参数
					countName: 'total' //规定数据总数的字段名称，默认：count
					,dataName: 'rows' //规定数据列表的字段名称，默认：data
				}
				,cols: [
						[
					{field:'', title:'序号', sort: true, type:'numbers', width: 60}
					,{field:'sysUser.username', title:'员工姓名'
						,templet: function(d){
							var value = "";
							if(d.sysUser != null){
								value = d.sysUser.username
							}
							return value;
						},
					}
					,{field:'sysUser.jobNumber', title:'员工工号'
						,templet: function(d){
							var value = "";
							if(d.sysUser != null){
								value = d.sysUser.jobNumber
							}
							return value;
						},
					}
					,{field:'taremark1', title:'出勤天数'}
					,{field:'taremark2', title:'缺勤天数'}
					]
				]
				,page: true
				,done : function(){
					$('th').css({
						'background-color': '#009688', 'color': '#fff','font-weight':'bold',
					})
				}
			});
			table.render({
				elem: '#tableListDetail'
				,title: '考勤列表'
				,id :'contenttableDetail'
                ,data:new Array()
				,limits:[10,20,30]
				,toolbar: '#toolbar'
				,request: {   //如果无需自定义请求参数，可不加该参数
					pageName: 'page' //页码的参数名称，默认：page
					,limitName: 'pageSize' //每页数据量的参数名，默认：limit
				}
				,response: {   //如果无需自定义数据响应名称，可不加该参数
					countName: 'total' //规定数据总数的字段名称，默认：count
					,dataName: 'rows' //规定数据列表的字段名称，默认：data
				}
				,cols: [
						[
					{field:'taid', title:'序号', sort: true, type:'numbers', width: 60}
					,{field:'tatype', title:'考勤类型'}
					,{field:'tadate', title:'考勤日期'}
					,{field:'taresult', title:'考勤结果'}
					,{field:'goTime', title:'上班时间'}
					,{field:'leaveTime', title:'下班时间'}
					,{field:'taremark', title:'备注'}
					]
				]
				,page: true
				,done : function(){
					$('th').css({
						'background-color': '#009688', 'color': '#fff','font-weight':'bold',
					})
				}
			});

			//监听复选框事件
			table.on('checkbox(tableList)',function(obj){
				if(obj.checked == true && obj.type == 'all'){
					//点击全选
					$('.layui-table-body table.layui-table tbody tr').addClass('layui-table-click');
				}else if(obj.checked == false && obj.type == 'all'){
					//点击全不选
					$('.layui-table-body table.layui-table tbody tr').removeClass('layui-table-click');
				}else if(obj.checked == true && obj.type == 'one'){
					//点击单行
					if(obj.checked == true){
						obj.tr.addClass('layui-table-click');
					}else{
						obj.tr.removeClass('layui-table-click');
					}
				}else if(obj.checked == false && obj.type == 'one'){
					//点击全选之后点击单行
					if(obj.tr.hasClass('layui-table-click')){
						obj.tr.removeClass('layui-table-click');
					}
				}
			})
			//行点击配置
			table.on('row(tableList)', function(obj){
				var data = obj.data;
				var whereStr = ""
				var keyword01 = $("#keyword01").val();
				if(keyword01 != ""){
					whereStr += " and username = '''" + keyword01+"'''"
				}
				var startTime = $("#startTime").val();
				if(startTime != ""){
					whereStr += " and tadate >= '''" + startTime+"'''"
				}
				var endTime = $("#endTime").val();
				if(endTime != ""){
					whereStr += " and tadate <= '''" + endTime+"'''"
				}
				table.reload('contenttableDetail',{
					method:'get'
					,url:'/timeAttendance/timeAttendanceList'
					,where:{"whereStr":whereStr,"tauid":data.tauid}
					,page: {
						curr: 1//重新从第 1 页开始
					}
				});
			});

		});
	</script>
  </body>
</html>
